<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理接口测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            line-height: 1.6;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
        }
        h1 {
            color: #333;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        .api-section {
            margin-bottom: 30px;
            border: 1px solid #ddd;
            padding: 15px;
            border-radius: 5px;
        }
        .api-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #2c3e50;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        textarea {
            height: 100px;
            font-family: monospace;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background-color: #2980b9;
        }
        .response {
            margin-top: 15px;
            padding: 10px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        pre {
            margin: 0;
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>用户管理接口测试</h1>
        
        <div class="api-section">
            <div class="api-title">1. 添加用户 (POST /user/saveUser)</div>
            <div class="form-group">
                <label for="saveUserData">用户数据 (JSON):</label>
                <textarea id="saveUserData">{
    "id": 1,
    "name": "张三",
    "age": 25
}</textarea>
            </div>
            <button onclick="testSaveUser()">测试添加用户</button>
            <div class="response" id="saveUserResponse"></div>
        </div>
        
        <div class="api-section">
            <div class="api-title">2. 删除用户 (POST /user/deleteUser)</div>
            <div class="form-group">
                <label for="deleteUserId">用户ID:</label>
                <input type="number" id="deleteUserId" value="1">
            </div>
            <button onclick="testDeleteUser()">测试删除用户</button>
            <div class="response" id="deleteUserResponse"></div>
        </div>
        
        <div class="api-section">
            <div class="api-title">3. 更新用户 (POST /user/updateUser)</div>
            <div class="form-group">
                <label for="updateUserData">用户数据 (JSON):</label>
                <textarea id="updateUserData">{
    "id": 1,
    "name": "李四",
    "age": 30
}</textarea>
            </div>
            <button onclick="testUpdateUser()">测试更新用户</button>
            <div class="response" id="updateUserResponse"></div>
        </div>
        
        <div class="api-section">
            <div class="api-title">4. 根据ID查询用户 (GET /user/getUserById)</div>
            <div class="form-group">
                <label for="getUserId">用户ID:</label>
                <input type="number" id="getUserId" value="1">
            </div>
            <button onclick="testGetUserById()">测试查询用户</button>
            <div class="response" id="getUserByIdResponse"></div>
        </div>
        
        <div class="api-section">
            <div class="api-title">5. 获取用户列表 (GET /user/listUser)</div>
            <button onclick="testListUser()">测试获取用户列表</button>
            <div class="response" id="listUserResponse"></div>
        </div>
    </div>

    <script>
        const BASE_URL = 'http://localhost:8080';
        
        function displayResponse(elementId, response) {
            document.getElementById(elementId).innerHTML = 
                `<pre>${JSON.stringify(response, null, 2)}</pre>`;
        }
        
        function testSaveUser() {
            const data = document.getElementById('saveUserData').value;
            fetch(`${BASE_URL}/user/saveUser`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: data
            })
            .then(response => response.json())
            .then(data => displayResponse('saveUserResponse', data))
            .catch(error => displayResponse('saveUserResponse', {error: error.message}));
        }
        
        function testDeleteUser() {
            const userId = document.getElementById('deleteUserId').value;
            fetch(`${BASE_URL}/user/deleteUser`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({id: userId})
            })
            .then(response => response.json())
            .then(data => displayResponse('deleteUserResponse', data))
            .catch(error => displayResponse('deleteUserResponse', {error: error.message}));
        }
        
        function testUpdateUser() {
            const data = document.getElementById('updateUserData').value;
            fetch(`${BASE_URL}/user/updateUser`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: data
            })
            .then(response => response.json())
            .then(data => displayResponse('updateUserResponse', data))
            .catch(error => displayResponse('updateUserResponse', {error: error.message}));
        }
        
        function testGetUserById() {
            const userId = document.getElementById('getUserId').value;
            fetch(`${BASE_URL}/user/getUserById?userId=${userId}`)
            .then(response => response.json())
            .then(data => displayResponse('getUserByIdResponse', data))
            .catch(error => displayResponse('getUserByIdResponse', {error: error.message}));
        }
        
        function testListUser() {
            fetch(`${BASE_URL}/user/listUser`)
            .then(response => response.json())
            .then(data => displayResponse('listUserResponse', data))
            .catch(error => displayResponse('listUserResponse', {error: error.message}));
        }
    </script>
</body>
</html>